<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        $(function () {
        losdTypes();
        })
        function  loadType(condition) {
            $.getJSON("/type/selectAll",{"condition":condition},function (data) {
                $("tbody").empty();
                for(let type of data){
                    let rowIten=`
                    <tr>
                    <td>${type.id}</td>
                    <td>${type.tnName}</td>
                    <td>${type.rCount}</td>
                    <td>
                    <button type="button" class="btn btn-primary">修改</button>
                    <button type="button" class="btn btn-danger">删除</button>
</td>
</tr>`
                    ${"tbody"}.append(rowItem);
                }

            })

        }
        function search() {
            let value =$("#searchValue").val();
            loadType(value);

        }
    </script>
</head>
<body>
     <div class="container-fluid my-container">
         <ol class="breadcrumb" style="...">
             <li><a href="#">主页</a></li>
             <li><a href="#">房型管理</a></li>
             <li class=""active>房型列表</li>
         </ol>
         <from class="from-inline">
             <div class="from-group">
                 <input type="text" class="btn btn-primary"id="searchValue"placeholder="请输入关键字">
             </div>
             <button type="button" class="btn btn-primary"id="searchBtn" onclick="search()">搜索</button>
         </from>
      <div class="pannel panner-default"style="...">
          <div class ="panel-heading">
              <h3 class="panel-title">操作面板</h3>
          </div>
          <div class="pannel-body">
              <table class="table table-hover table-condensed table-bordered table-striped">
              <thead>
              <tr>
                  <th>编号</th>
                  <th>房型名称</th>
                  <th>房间数量</th>
                  <th width="180">操作</th>
              </tr>
              </thead>

</body>
</html>